<template>
  <!-- :fullscreen="true" -->
  <j-modal
    :title="title"
    :width="700"
    :visible="visible"
    :maskClosable="false"
    :fullscreen="true"
    :footer="null"
    :destroyOnClose="true"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @close="close"
    cancelText="关闭"
    okText="保存"
  >
    <indexModel :databaseId="databaseId" />
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import { postAction } from '@/api/manage'
import indexModel from './components/indexMdel.vue'
export default {
  name: 'SysPositionModal',
  components: { indexModel },
  props: ['nodeData', 'modelOpts'],
  data() {
    return {
      treeData: [],
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      url: {
        add: '/metaDataModel/addMetaDataField',
        edit: '/metaDataModel/updateMetaDataField',
        field: '/metaDataModel/metaDataFieldByModelId',
      },
      model: {},
      databaseId: '',
      validatorRules: {
        fieldNameZH: [{ required: true, message: '请输入中文名称' }],
        fieldNameEN: [{ required: true, message: '请输入英文名称' }],
        fieldType: [{ required: true, message: '请选择数据类型' }],
        fieldLength: [{ required: true, message: '请输入值域' }],
        // setTime: [{ required: true, message: '请选择!' }],
        // useTime: [{ required: true, message: '请选择!' }],
        // cate: [{ required: true, message: '请选择!' }],
      },
      typeList: [
        {
          value: 0,
          label: '主数据',
        },
        {
          value: 1,
          label: '业务数据',
        },
      ],
      datatypelist: [
        {
          value: 'char',
          label: 'char',
        },
        {
          value: 'decimal',
          label: 'decimal',
        },
        {
          value: 'double',
          label: 'double',
        },
        {
          value: 'float',
          label: 'float',
        },
        {
          value: 'date',
          label: 'date',
        },
        {
          value: 'timestamp',
          label: 'timestamp',
        },
      ],
      fieldConstraintOpts: [
        { label: '普通', value: 0 },
        { label: '主键', value: 1 },
        { label: '外键关联', value: 2 },
      ],
      fieldIsNullOpts: [
        { label: 'M必选', value: 0 },
        { label: 'O可选', value: 1 },
      ],
      fieldMaxTimeslist: [
        {
          value: 1,
          label: '1次',
        },
        {
          value: 2,
          label: '2次',
        },
        {
          value: 3,
          label: '3次',
        },
        {
          value: 4,
          label: 'N次',
        },
      ],
      associatedFieldlist: [],
      associatedModellist: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      labelColRow: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperColRow: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
    }
  },
  created() {
    // this.loadTree()
    this.associatedModellist = this.modelOpts
  },
  watch: {
    visible: {
      handler(val) {
        this.associatedModellist = this.modelOpts
      },
    },
  },
  mounted() {},
  methods: {
    add() {
      this.model = {
        ...this.nodeData,
        id: '',
      }
      // this.model = this.$options.data().model
      this.peopleList = []
      this.visible = true
    },
    check(record) {
      this.model = Object.assign({}, record)
      if (this.model.cate) {
        this.model.cate = this.model.cate.split(',')
      }
      this.visible = true
    },
    edit(record) {
      this.model = {
        ...this.nodeData,
        ...record,
      }
      this.databaseId = record.databaseId
      this.getFieldList(record.associatedModel)
      // this.model = {} Object.assign({}, record)
      this.visible = true
    },
    httpRequest() {
      getAction(this.url.get, { id: this.model.id }).then((res) => {
        if (res.success) {
          this.model = res.result
        } else {
          console.log(res)
        }
      })
    },
    close(isSubmit) {
      if (isSubmit) {
        this.saveData()
      } else {
        this.visible = false
      }
    },
    handleModelChange(id) {
      // console.log(id, 'id')
      this.getFieldList(id)
    },
    async getFieldList(id) {
      const { result } = await getAction(this.url.field, { modelId: id })
      this.associatedFieldlist = result
    },
    saveData() {
      const data = {
        ...this.model,
        modelId: this.nodeData.id,
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          postAction(!this.model.id ? this.url.add : this.url.edit, data)
            .then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {})
        } else {
          return false
        }
      })
    },
    loadTree() {
      this.treeData = []
      getAction(this.url.tree, { type: 1 }).then((res) => {
        if (res.success) {
          // debugger
          this.treeData = res.result
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../css/checkAndEdit.less';

// .name-type {
//   width: 110px;
//   margin-left: 5px;
//   border: 1px solid #e0e0e0;

//   /deep/ .ant-select-selection {
//     box-sizing: border-box;
//     min-height: 27px !important;

//     .ant-select-selection__rendered {
//       line-height: 27px !important;
//     }
//   }
// }
// .value {
//   /deep/ .tox-tinymce {
//     height: 55vh !important;
//   }
// }
</style>
